<template>
	<view class="user_center_container">
		<uni-nav-bar left-icon="arrowleft" color="white" title="个人中心" @click-left="back" backgroundColor="#393c43" @click-right="back" />
		<image src="https://www.ajxqj.com/m/static/images/user-center-bg.png">
			<cover-view class="center_title">
				广东俊熙全景软件开发服
				<br />
				务有限公司
			</cover-view>
		</image>
		<view class="user_info_container">
			<view class="info line-black">
				<text>账号</text>
				<text>{{ account }}</text>
			</view>
			<view class="info line-black">
				<text>会员</text>
				<view class="register_container">
					<text>注册会员</text>
					<button type="warn" size="mini">续费</button>
					<button type="default" size="mini" class="yellow">升级</button>
				</view>
			</view>
			<view class="info line-black">
				<text>过期时间</text>
				<text>{{ expirationTime }}</text>
			</view>
			<view class="info line-black">
				<text>我的余额</text>
				<view class="register_container">
					<text>¥ {{ money }}</text>
					<button type="warn" size="mini">充值</button>
					<button type="default" size="mini" class="green">提现</button>
				</view>
			</view>
			<button class="quit" type="warn" @click="quit">退出登陆</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			account: '',
			expirationTime: '2019-9-23',
			money: 0
		};
	},
	onLoad:function(){
		var that = this;
		uni.getStorage({
		    key: 'cellphone',
		    success: function (res) {
				that.account = res.data;
		    }
		});
	},
	methods: {
		quit:function(){
			uni.removeStorage({
			    key: 'cellphone',
			    success: function (res) {
					this.account = res.data;
			        uni.switchTab({
			        	url:"../index/index"
			        })
			    }
			});
		},
		back() {
			uni.switchTab({
				url: '../user/index'
			});
		}
	}
};
</script>

<style>
.user_center_container image {
	width: 100%;
	height: 350rpx;
}
.center_title {
	color: white;
	text-align: center;
	position: absolute;
	left: 50%;
	font-size: 30rpx;
	margin-left: -150rpx;
	top: 150rpx;
}

.line-black {
	border-bottom: solid black 1rpx;
}
.user_info_container {
	background-color: #393c43;
	padding-bottom: 10rpx;
}
.info {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
}
.info text {
	color: white;
}

.register_container {
	display: flex;
	align-items: center;
}
.register_container text {
	color: red;
}
.register_container button {
	width: 120rpx;
	height: 50rpx;
	font-size: 12rpx;
	line-height: 50rpx;
	border-radius: 30rpx;
	margin-left: 10rpx;
}
.yellow {
	background-color: #ff976a;
}
.green {
	background-color: #10a408;
}
.quit {
	height: 70rpx;
	line-height: 70rpx;
	width: 80%;
	border-radius: 30rpx;
	margin: 30rpx auto;
}
</style>
